<?php include("conf.php");?>
<?php 
    $pagetitle = "动态改变iframe 高度";
    $cssList = array('assets/style/base/base.css', 'assets/style/com/com.css');
    $jsList = array('assets/script/base/base.js');
?>
<?php include("inc/header.inc.php");?>

<div class="content">
	<div class="aside">
		<div class="aside_wrap">
			<?php include("inc/asideMenu.inc.php");?>
		</div>
	</div>
	<div class="main">
		<div class="main_wrap">
			<div class="article">
				<div class="article_hd">
					<h1 class="article_tit"><?php echo $pagetitle; ?></h1>
				</div>
				<div class="article_bd">
					<div style="margin:30px 0;padding:20px;background-color:#ffc;border:1px solid #F1D031;">
						<label for="selectSrc">选择iframe文档地址(src)：<select id="selectSrc">
								<option value="0" selected="selected">---请选择---</option>
								<option value="1">a</option>
								<option value="2">b</option>
								<option value="3">c</option>
								<option value="4">d</option>
							</select>
						</label>
					</div>
					
					<!-- start iframe -->
					<iframe src="test_iframe_con/a.html" name="mainframe" id="mainframe" frameborder="0" marginheight="0" marginwidth="0" frameborder="0" scrolling="auto"  onload="javascript:refreshIframeSize('mainframe');" width="100%"></iframe>
					<!-- end iframe -->

					<!-- 设置iframe 自动适应内容并调整高度 -->
					<script type="text/JavaScript">
						$("#selectSrc").change(function(){
							var _iframe = document.getElementById("mainframe");
							if($(this).val()==0){
								return false;
							}
							var ifrmeSrc = "test_iframe_con/" + $(this).children("option:selected").text() + ".html";
							_iframe.src=ifrmeSrc;
							refreshIframeSize('mainframe');
						});

						/**
						* description: 设置iframe 自动适应内容并调整高度
						* author: 徐国南
						* date: 2013-4-17
						**/
						function refreshIframeSize(nodeId){
							var node = null; 
							if(document.getElementById){ 
								node = document.getElementById(nodeId); 
							}else{
								eval('node = ' + nodeId + ';');
							};
							if(node && !window.opera){ 
								node.style.display="block";
								if(node.contentDocument && node.contentDocument.body.offsetHeight){ 
									node.height = node.contentDocument.body.offsetHeight +20;
								}else if(node.Document && node.Document.body.scrollHeight){ 
									node.height = node.Document.body.scrollHeight; 
									node.width = node.Document.body.scrollWidth; 
								}
							}
						}
					</script>	
				</div>
			</div>
		</div>
	</div>
</div>
<?php include("inc/footer.inc.php");?>